<template>
  <div class="index" >
    <div class="container">
      <div class="main">
        <img class="logo" src="../common/images/index_logo.png" alt="">
        <img class="magnetic" src="../common/images/index_music_button.png" alt="" @click="controlMusic">
        <img class="magnetic" src="../common/images/index_music_stop_button.png" alt=""
             v-if="!playMusic"
             @click="controlMusic">
        <img class="text" src="../common/images/index_text.png" alt="">
        <img class="recorder" src="../common/images/index_recorder.png" alt="" @click="controlMusic">
        <img class="newspaper" src="../common/images/index_newspaper.png" alt="">
        <img class="tips-hand" src="../common/images/index_tips_hand.png" alt="" v-show="showTipsHand">
        <img class="tips-1" src="../common/images/index_tips1.png" alt="">
        <img class="tips-2" src="../common/images/index_tips2.png" alt="">
        <img class="button" src="../common/images/index_button.png" alt="" @click="goMusic" v-show="showButton">
        <!--<img class="masked" src="../common/images/index_masked.png" alt="">-->
        <audio class="music">
          <source src="../common/music/2.mp3" type="audio/mp3"/>
        </audio>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    // mixins 混合
    mixins: [],
    data() {
      return {
        playMusic: false,
        showTipsHand: false,
        showButton: false
      }
    },
    mounted() {
      setTimeout(() => {
        this.showTipsHand = true
      }, 14000)
    },
    methods: {
      goMusic() {
        this.$router.push({path: 'music'})
      },
      controlMusic() {
        this.playMusic = !this.playMusic
      }
    },
    watch: {
      playMusic: function () {
        var tape = $('.music')[0]
        if (this.playMusic) {
          this.showButton = true
          this.showTipsHand = false
          tape.play()
        } else {
          tape.pause()
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../common/stylus/base.styl'
  @keyframes fadeIn
    from
      opacity 0
    to
      opacity 1
  @keyframes fadeOut
    from
      opacity 1
    to
      opacity 0
  @keyframes fadeInOut
    0%
      opacity 0
    30%
      opacity 1
    70%
      opacity 1
    100%
      opacity 0
  @keyframes drop
    from
      left vw(353)
    to
      left vw(370)
  .main
    width 100%
    height vw(1250)
    background url("../common/images/index_bg.jpg")
    background-size 100% 100%
    .logo
      width vw(287)
      position absolute
      left vw(22)
      top vw(24)
    .magnetic
      width vw(63)
      position absolute
      right vw(28)
      top vw(41)
    .text
      width vw(534)
      position absolute
      left vw(119)
      top vw(200)
      animation fadeIn 3s
    .recorder
      width vw(267)
      position absolute
      left vw(130)
      top vw(591)
      opacity 0
      animation fadeIn 3s linear 7s forwards
    .newspaper
      width vw(126)
      position absolute
      left vw(365)
      top vw(661)
      opacity 0
      animation fadeIn 3s linear 2s forwards
    .tips-hand
      width vw(71)
      position absolute
      left vw(353)
      top vw(734)
      animation drop .6s linear .1s infinite
    .tips-1
      width vw(138)
      position absolute
      left vw(329)
      top vw(540)
      opacity 0
      animation fadeInOut 4s linear 10s forwards
    .tips-2
      width vw(117)
      position absolute
      left vw(460)
      top vw(598)
      opacity 0
      animation fadeInOut 4s linear 4s forwards
    .button
      width vw(244)
      position absolute
      left vw(253)
      top vw(1062)
    .masked
      width 100%
      height 100%
      position absolute
      opacity .1
      z-index 1000
</style>
